<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon"
          href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👀</text></svg>">
    <!--    replace with cdn address-->
    <link rel="stylesheet" href="https://andybrewer.github.io/mvp/mvp.css">

    <meta charset="utf-8">
    <!--    keywords-->
    <meta name="keywords" content="visitor count,visitor track,badge, markdown, github, free">
    <!--    description-->
    <meta name="description"
          content="Visitor badge for markdown file, put it in your GitHub README.md to know how many uses visited your repo! For Free!">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Visitor Badge</title>
</head>

<body>
<header>
    <nav>
        <a href="/">
            <svg xmlns="http://www.w3.org/2000/svg" height="70" data-v-423bf9ae="" viewBox="0 0 383.4224624176554 181"
                 class="iconAbove"><!----><!----><!---->
                <g data-v-423bf9ae="" id="43ed7639-6444-49ea-82e7-c83eaa18d814" fill="black"
                   transform="matrix(4.5836515890443295,0,0,4.5836515890443295,-1.2834212056395984,98.96630848574733)">
                    <path fill="var(--color-secondary)"
                          d="M1.61 7.88L0.28 7.88L2.87 14.88L4.51 14.88L7.10 7.88L5.77 7.88L3.70 13.59L3.67 13.59ZM9.86 7.88L8.50 7.88L8.50 14.88L9.86 14.88ZM8.43 6.16L9.93 6.16L9.93 4.66L8.43 4.66ZM17.36 11.66L15.74 10.72L13.45 10.72L13.45 9.10L17.22 9.10L17.22 7.88L13.72 7.88L12.10 8.82L12.10 11.00L13.72 11.94L16.00 11.94L16.00 13.66L12.10 13.66L12.10 14.88L15.74 14.88L17.36 13.94ZM20.96 7.88L19.60 7.88L19.60 14.88L20.96 14.88ZM19.53 6.16L21.03 6.16L21.03 4.66L19.53 4.66ZM22.64 9.10L23.93 9.10L23.93 13.94L25.55 14.88L26.96 14.88L26.96 13.66L25.28 13.66L25.28 9.10L26.96 9.10L26.96 7.88L25.28 7.88L25.28 5.92L23.93 6.71L23.93 7.88L22.64 7.88ZM34.87 14.01L34.87 8.75L33.25 7.81L30.55 7.81L28.92 8.75L28.92 14.01L30.55 14.95L33.25 14.95ZM30.28 9.03L33.52 9.03L33.52 13.73L30.28 13.73ZM41.02 9.10L41.02 7.88L39.47 7.88L38.47 8.46L38.14 7.88L37.11 7.88L37.11 14.88L38.47 14.88L38.47 9.10ZM48.55 7.81L47.56 8.39L47.56 4.66L46.20 4.66L46.20 14.95L46.56 14.95L47.56 14.38L48.55 14.95L50.67 14.95L52.29 14.01L52.29 8.75L50.67 7.81ZM47.56 9.03L50.93 9.03L50.93 13.73L47.56 13.73ZM55.61 12.01L58.42 12.01L58.42 13.73L55.61 13.73ZM55.87 14.95L57.43 14.95L58.42 14.38L59.42 14.95L59.78 14.95L59.78 8.82L58.16 7.88L54.95 7.88L54.95 9.10L58.42 9.10L58.42 10.79L55.87 10.79L54.25 11.73L54.25 14.01ZM63.64 7.81L62.02 8.75L62.02 14.01L63.64 14.95L65.76 14.95L66.75 14.38L67.09 14.95L68.11 14.95L68.11 4.66L66.75 4.66L66.75 8.39L65.76 7.81ZM66.75 13.73L63.38 13.73L63.38 9.03L66.75 9.03ZM71.71 14.88L75.08 14.88L75.08 16.56L71.43 16.56L71.43 15.16L70.07 15.95L70.07 16.81L71.69 17.75L74.82 17.75L76.44 16.81L76.44 14.60L74.82 13.66L71.71 13.66L71.71 12.47L74.40 12.47L76.02 11.54L76.02 9.60L75.17 9.10L76.44 8.36L76.44 7.88L71.97 7.88L70.35 8.82L70.35 11.69L71.34 12.26L70.35 12.84L70.35 14.10ZM71.71 9.07L74.66 9.07L74.66 11.28L71.71 11.28ZM83.93 13.66L79.76 13.66L79.76 11.86L83.93 11.86L83.93 8.75L82.31 7.81L80.02 7.81L78.40 8.75L78.40 13.94L80.02 14.88L83.93 14.88ZM79.76 9.03L82.57 9.03L82.57 10.64L79.76 10.64Z"/>
                </g><!---->
                <g data-v-423bf9ae="" id="2b2ae3d6-3651-41c8-95f7-e4100d2e5eec"
                   transform="matrix(1.0920221964518229,0,0,1.0920221964518229,140.41899121005312,-0.7291334260255979)"
                   stroke="none" fill="black">
                    <path fill="var(--color-secondary)"
                          d="M78.145 94.255L64.9 30.442c4.664-5.837 12.566-10.411 12.566-10.411L80.481 9.58l-22.658-.844L56.361.718 34.34 53.39 22.478 90.057c-2.164-1.028-6.174-3.531-10.188-9.166 0 0-1.592 9.185 2.641 14.404 1.694 2.091 5.03 3.705 5.03 3.705h54.79c0-5.626-14.593-6.731-14.593-6.731 0-.888-.061-2.269-.167-2.269h-.163s.033-1.654-.617-3.688c-.02-.062-.037-.264-.059-.324-.034-.104-.074-.284-.114-.393a17.97 17.97 0 0 0-1.403-2.976c-2.237-3.713-6.753-8.108-15.88-10.865l1.422-2.558s10.452 2.241 16.018 9.799l3.149-10.657L70.141 92h.031c.101 0 7.585 2.08 7.585 7h4.709s-.896-3.479-4.321-4.745z"/>
                </g><!----></svg>
        </a>
        <ul>
            <li>Home</li>
            <li><a href="#">Docs</a></li>
            <li><a href="https://github.com/jwenjian/visitor-badge" target="_blank">GitHub &nearr;</a></li>
        </ul>
    </nav>
    <h1>Count visitors for your <i>README.md, Issues, PRs</i> in <u>GitHub</u></h1>
    <p>in just
        <mark>one line markdown code</mark>
    </p>
    <p><img src="https://visitor-badge.glitch.me/badge?page_id=visitor-badge.glitch.me"></p>
    <br>
    <p><a href="#donation"><i>💗 Donate 💗</i></a><a href="#docs"><b>Getting started</b></a></p>
</header>
<main>
    <hr>
    <article id="docs">
        <h2>Docs</h2>
        <p>How to use?</p>
        <aside>
            <p>If you know how to add picture in markdown, then you are good to go.</p>
        </aside>
        <p>All you have to do is to add below
            <mark>markdown markup</mark>
            to your markdown content:
        </p>
        <pre>
                <code lang="markdown">
                    ![visitors](https://visitor-badge.glitch.me/badge?page_id=page.id&left_color=red&right_color=green)
                </code>
            </pre>
            <p>In which, </p>
        <p>The url parameter
            <mark>page_id</mark>
            is <b>REQUIRED</b>, please use the unique string to best represent your page.
        </p>
        
        <p id="page_id_rule">I recommend you to follow <code>page_id</code> rules below:</p>
        <ol>
            <li>For README.md file, use <i>${your.username}.${your.repo.id}</i>, <code>https://visitor-badge.glitch.me/badge?page_id=jwenjian.visitor-badge</code>
                for example.
            </li>
            <li>For Issue body, use <i>${your.username}.${your.repo.id}.issue.${issue.id}</i>, <code>https://visitor-badge.glitch.me/badge?page_id=jwenjian.visitor-badge.issue.1</code>
                for example.
            </li>
        </ol>
        <p>or any other markdown content, please give an unique string to distinguish</p>

        <p>The url parameter <mark>left_color</mark> and <mark>right_color</mark> is optional, you can customize the badge color by passing the two parameters.</p>

        <p>The values supports color names(like green) and RGB in hex string starts with a hashtag(like #66ccff)
        </p>
    </article>
    <hr>
    <div id="faq">
        <header>
            <h2>FAQ</h2>
        </header>
        <details id="faq-use-in-html">
            <summary>Can I use this in HTML file?</summary>
            <p>Sure!</p>
            <p>All you have to do is to insert a <code>&lt;img&gt;</code> to your HTML:</p>
            <pre>
                    <code lang="html">
                        &lt;img src="https://visitor-badge.glitch.me/badge?page_id=page.id" alt="visitor badge"/&gt;
                    </code>
                </pre>
            <p>For page_id parameter, follow <a href="#page_id_rule">the rules.</a></p>
        </details>
        <details>
            <summary>Is this free?</summary>
            <p>Yes and it will always be free and no limitations!</p>
            <p>If you found this useful, you can <a href="#donation">buy me a coffee ☕️ </a> or <a
                    href="https://github.com/jwenjian/visitor-badge" target="_blank">give a star ✨</a></p>
        </details>
    </div>
    <hr>
    <section>
        <header>
            <h2>What's next?</h2>
            <p>What new features will be available in the next release?</p>
        </header>
        <aside>
            <h3>Data backup regularly</h3>
            <p>Backup the latest data into a safe place weekly and make it recoverable</p>
        </aside>
        <aside>
            <h3>Count by day support</h3>
            <p>The badge is counting visitors in all time, but it will be more useful to count visitors in current
                date（24h）</p>
        </aside>
        <aside>
            <h3>Statistics</h3>
            <p>Line chart of visitors in latest 7 days</p>
        </aside>
        <aside>
            <h3>Not your expectation?</h3>
            <p><a href="https://github.com/jwenjian/visitor-badge/issues/new" target="_blank">Just tell me...</a></p>
        </aside>
    </section>
    <hr/>
    <section id="donation">
        <header>
            <h2>Donation</h2>
            <p>Currently, the service is running on <a>glitch.com</a> with a free version, it will <a
                    href="https://support.glitch.com/t/not-letting-the-app-go-down/2000" target="_blank">sleep</a> if no
                request in a few moment as you know</p>
            <p>Your donation will encourage me add more feature and make this service more stable and keep it free.</p>
        </header>
        <aside>
            <h3>Donation</h3>
            <p><a href="https://paypal.me/jwenjian/5" target="_blank">PayPal</a></p>
            <p><a title="WeChat Pay donation link">WeChat Pay(coming soon)</a></p>
            <p><a title="Ali Pay donation link">Ali Pay(coming soon)</a></p>
            </p>
        </aside>
    </section>
</main>
<footer>
    <hr>
    <p>
        Made by <a href="https://github.com/jwenjian" target="_blank">Wenjian Jiang</a> and ❤️
    </p>
</footer>
</body>

</html>